import { useState } from "react";

import { Link } from "react-router-dom";
const EditModal = ({ question, onClose, onSave }) => {
  const [formData, setFormData] = useState(question);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: name === "tags" ? value.split(",") : value,
    }));
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-lg p-6 w-full max-w-2xl">
        <h2 className="text-xl font-bold mb-4">编辑文章</h2>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">标题</label>
            <input
              name="title"
              value={formData.title}
              onChange={handleChange}
              className="w-full p-2 border rounded"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-1">内容</label>
            <textarea
              name="content"
              value={formData.content}
              onChange={handleChange}
              className="w-full p-2 border rounded h-32"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-1">
              标签（逗号分隔）
            </label>
            <input
              name="tags"
              value={formData.tags.join(",")}
              onChange={handleChange}
              className="w-full p-2 border rounded"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-1">主题</label>
            <input
              name="topic"
              value={formData.topic}
              onChange={handleChange}
              className="w-full p-2 border rounded"
            />
          </div>
        </div>

        <div className="mt-6 flex justify-end space-x-3">
          <button
            onClick={onClose}
            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
          >
            取消
          </button>
          <button
            onClick={() => onSave(formData)}
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            保存
          </button>
        </div>
      </div>
    </div>
  );
};
export default function MyQuestionList({ questions, onDelete, onUpdate }) {
  const [isEditing, setIsEditing] = useState(false);
  const [currentQuestion, setCurrentQuestion] = useState(null);

  const handleEditClick = (question) => {
    setCurrentQuestion(question);
    setIsEditing(true);
  };
  const handleSave = (updated) => {
    onUpdate(updated);
    setIsEditing(false);
  };
  return (
    <div className="space-y-4">
      {questions.length > 0 ? (
        questions.map((question) => (
          <div
            key={question.id}
            className="border border-gray-200 rounded-lg p-4  shadow-md  hover:shadow-lg transition"
          >
            <div className="flex justify-between cursor-pointer items-start space-x-4 text-sm">
              <div>
                <Link to={`/questionDetails/${question.id}`}>
                  <h3 className="text-lg font-semibold">{question.title}</h3>
                  <p className="text-sm mt-1 line-clamp-2">
                    {question.content}
                  </p>
                  <div className="mt-2 flex items-center text-sm text-gray-500">
                    <span>
                      {new Date(question.createTime).toLocaleDateString()}
                    </span>
                    <span className="mx-2">•</span>
                    <span>{question.topic}</span>
                  </div>
                </Link>
                <div className="mt-2 flex flex-wrap gap-2">
                  {question.tags.map((tag) => (
                    <span
                      key={tag}
                      className="px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded-md"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
                <div className="mt-2 flex flex-wrap gap-2">
                  <span className="px-2 py-1  text-red-700 text-sm rounded-full">
                    {question.topic}
                  </span>
                </div>
              </div>
              <div className="gap-2 justify-center  flex flex-col">
                <button
                  onClick={() => handleEditClick(question)}
                  className="px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded"
                >
                  更新
                </button>
                <button
                  onClick={() => onDelete(question.id)}
                  className="px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded"
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        ))
      ) : (
        <div className="text-center py-12 bg-white rounded-lg border-2 border-dashed border-gray-200">
          <svg
            className="mx-auto h-12 w-12 text-gray-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <h3 className="mt-4 text-lg font-medium text-gray-900">暂无提问</h3>
          <p className="mt-1 text-sm text-gray-500">
            快去发布你的第一个提问吧！
          </p>
          <div className="mt-6">
            <button className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
              <svg
                className="-ml-1 mr-2 h-5 w-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 4v16m8-8H4"
                />
              </svg>
              立即提问
            </button>
          </div>
        </div>
      )}
      {isEditing && currentQuestion && (
        <EditModal
          question={currentQuestion}
          onClose={() => setIsEditing(false)}
          onSave={handleSave}
        />
      )}
    </div>
  );
}
